<!-- MessageItem.vue -->
<template>
    <div class="message-item">
        <div class="sender-info" style="display: start; align-items: top;">
            <span>
                <img :src="message.sender.avatar" alt="" class="avatar" />
            </span>
            <span>
                <div>

                    <span class="message-meta">
                        {{ message.sender.name }}
                        {{ formattedTimestamp }}
                        <button @click="handleLike">
                            <span v-if="isLiked">
                                <svg t="1714117239522" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4261" width="16" height="16">
                                    <path
                                        d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z"
                                        p-id="4262" fill="#d81e06"></path>
                                </svg>
                            </span>
                            <span v-else>
                                <svg t="1714117239522" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4261" width="16" height="16">
                                    <path
                                        d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z"
                                        p-id="4262" fill="#dbdbdb"></path>
                                </svg>

                            </span>
                            <span>({{ message.likesCount }})</span>
                        </button>
                        <el-button @click="handleDeleteMessage" type="primary" link class="message-meta"
                            v-if="message.sender.id === $store.state.user.user_id">
                            <svg t="1714188361889" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="6585" width="16" height="16">
                                <path
                                    d="M853.333333 192v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-640a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333H384V128a42.666667 42.666667 0 0 1 42.666667-42.666667h170.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v42.666667h192a21.333333 21.333333 0 0 1 21.333333 21.333333zM250.453333 859.306667a85.333333 85.333333 0 0 0 85.333334 79.36h353.28a85.333333 85.333333 0 0 0 85.333333-79.36L810.666667 341.333333H213.333333z"
                                    p-id="6586" fill="#d81e06"></path>
                            </svg>
                        </el-button>
                    </span>

                </div>
                <div class="message-content" style="width: 100%">

                    <el-card shadow="never" style="width: 100%">
                        <span style="white-space: pre-wrap;"> {{ message.text }}</span >
                         <!-- {{ message.text }} -->
                     <!-- <pre>    <p v-html="message.text" ></p></pre> -->
                        </el-card>
                </div>
            </span>
        </div>


    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
const emits = defineEmits(['like', 'deleteMessage']);


const props = defineProps({
    message: {
        type: Object,
        required: true,
    },
});
const handleDeleteMessage = () => {

    emits('deleteMessage', props.message.id);

}
const isLiked = computed(() => props.message.likedByCurrentUser);
const formattedTimestamp = computed(() => new Date(props.message.timestamp).toLocaleString());


function handleLike() {
    // 在此处触发事件，传递message.id给父组件处理点赞逻辑
    emits('like', props.message.id);
}
</script>

<style scoped>
.message-item {
    /* display: flex; */
    flex-direction: column;
    margin-bottom: 1rem;
}

.sender-info {
    display: flex;
    align-items: start;
    margin-bottom: 0.5rem;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 0.5rem;
}

.message-content {
    font-size: 16px;
    width: 90%;
    text-align: left;
}

.message-meta {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #6c757d;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.box-card {
    margin-top: 15px;
}

.el-row {
    margin-bottom: 15px;
}

</style>